<template>
    <div class="linebtn">
          <div class="btn" v-if="menuType[0]" :class="idx=='0'?'select':''" @click="golink('/tuoke/count')">统计分析</div>
          <div class="btn" v-if="menuType[1]" :class="idx=='1'?'select':''" @click="golink('/tuoke/market')">营销助手管理</div>
          <div class="btn" v-if="menuType[7]" :class="idx=='7'?'select':''" @click="golink('/tuoke/tag')">标签管理</div>
          <div class="btn" v-if="menuType[2]" :class="idx=='2'?'select':''" @click="golink('/tuoke/friend')">好友库管理</div>
          <div class="btn" v-if="menuType[3]" :class="idx=='3'?'select':''" @click="golink('/tuoke/group')">群库管理</div>
          <div class="btn" v-if="menuType[4]" :class="idx=='4'?'select':''" @click="golink('/tuoke/chat')"><el-badge :value="num" :max="99" :hidden="num==0" class="item">聊天管理</el-badge></div>
          <div class="btn" v-if="menuType[5]" :class="idx=='5'?'select':''" @click="golink('/tuoke/moment')">朋友圈运营</div>
          <div class="btn" v-if="menuType[6]" :class="idx=='6'?'select':''" @click="golink('/tuoke/timed')">定时任务</div>
          <div class="btn" v-if="menuType[8]" :class="idx=='8'?'select':''" @click="golink('/tuoke/parameter')">参数管理</div>
      </div>
</template>
<script>
  import request from '@/utils/request'
  export  default {
    name:"nabar",
    props:{
      index:String,
      numid: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
         id:'',
         idx:'0',
         num:0,
         queryParams: {
          pageNum: 1,
          pageSize: 999,
          handleState:0,
        },
        menu:['/tuoke/count','/tuoke/market','/tuoke/friend','/tuoke/group','/tuoke/chat','/tuoke/moment','/tuoke/timed','/tuoke/tag','/tuoke/parameter'],
        menuType:[false,false,false,false,false,false,false,false,false],
      }
    },
    watch:{
      index: {
        handler(newValue,oldValue){
         this.init()
        },
        deep: true
      },
      numid: {
        handler(newValue,oldValue){
         this.init()
        },
        deep: true
      },
    },
    created(){
      //console.log(this.$store.state.permission.menuRouters)
      if(this.$store.state.permission.menuRouters!=""&&this.$store.state.permission.menuRouters!=null){
        var arr=this.$store.state.permission.menuRouters
        console.log(arr)
        arr.forEach(element => {
          if(element.name=="Tuoku"){
            if(element.children){
              element.children.forEach(item => {
                 if(this.menu.indexOf("/tuoke/"+item.path)!=-1){
                   this.menuType[this.menu.indexOf("/tuoke/"+item.path)]=true
                 }
              })
            }
          }
        });
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.idx=this.index
        this.id=this.numid
        if(this.menuType[4]){
          getNotRemind(this.queryParams).then(res=>{
            if(res.code==200){
                this.num=res.data.records.length
            }
          })
        }
      },
      golink(path,index,name){
        if(index!=this.idx){
            this.$router.push({ path}).catch(()=>{});
        }
      },
    }
  }
  export function getNotRemind(query) {
    return request({
      url: '/wxassistant/wcchat_remind/page',
      method: 'get',
      params: query
    })
  }
  </script>
  
  <style scoped lang="scss">
     .linebtn{
          display: flex;
          margin: -10px 0 10px 5px;
          height: 38px;
          .btn{
              width: 90px;
              text-align: center;
              line-height: 38px;
              font-size: 14px;
              color: #8c8c8c;
              margin-right: 10px;
              border: 1px solid #eaeff2;
              background-color: #fff;
              border-radius: 5px;
              cursor: pointer;
              .item{
                width: 70px;
                height: 40px;
              }
          }
          .select{
              background-color: #eaf6ff;
              border:1px solid #288dfc;
              color: #288dfc;
              font-weight: 550;
          }
    }
    .remind-num{
      font-size: 12px;color: #fff;border-radius: 50px;padding: 0 6px;background-color: #e81922;line-height: 16px;height: 15px;position: absolute;top: 2px;
    }
  </style>
  